<template>
  <div class="warpper">
    <HeaderBox></HeaderBox>
    <!-- 没有订单记录 -->
    <div class="details-order warpper_box">
      <div class="no-order" v-if="orderList.length==0">
        你好,没有查找你相关订单记录，
        <span>看看旅游景点</span>
      </div>
      <!-- 有订单记录 -->
      <div class="is_order" v-else>
        <el-table :data="orderList" style="width: 100%">
          <el-table-column type="index" label="序号" width="180"></el-table-column>
          <el-table-column prop="title" label="商品名称" ></el-table-column>
          <el-table-column prop="order_num" label="订单号" width="180"></el-table-column>
          <el-table-column prop="create_time" label="日期"></el-table-column>
        </el-table>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import { post } from "@/plugins/api.js";
export default {
  props: {},
  components: {},
  data() {
    return {
      orderList: []
    };
  },
  methods: {
    //获取订单列表
    getOrederList() {
      let store = JSON.parse(sessionStorage.getItem("store"));
      let { uid } = store;
      post("/travel/get_order_list", { uid }).then(res => {
        this.orderList = res.data;
      });
    }
  },
  mounted() {
    this.getOrederList();
  }
};
</script>
<style lang="scss" scoped>
.details-order {
  .no-order {
    min-height: 396px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;

    span {
      color: #37bcfb;
      cursor: pointer;
    }
  }
}
</style>
